<template>
  <div class="visit-statistics-container">
    <!-- 统计卡片区域 -->
    <div class="statistics-cards">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card
            shadow="hover"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                访客记录总数
              </div>
              <div class="card-data">
                <div class="today-data">
                  <div class="label">
                    今日
                  </div>
                  <div class="value">
                    0
                  </div>
                </div>
                <div class="yesterday-data">
                  <div class="label">
                    昨日数据
                  </div>
                  <div class="value">
                    0 条
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            shadow="hover"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                活跃登录用户
              </div>
              <div class="card-data">
                <div class="today-data">
                  <div class="label">
                    今日
                  </div>
                  <div class="value">
                    0
                  </div>
                </div>
                <div class="yesterday-data">
                  <div class="label">
                    昨日数据
                  </div>
                  <div class="value">
                    0 人
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card
            shadow="hover"
            class="stat-card"
          >
            <div class="card-content">
              <div class="card-title">
                新增注册用户
              </div>
              <div class="card-data">
                <div class="today-data">
                  <div class="label">
                    今日
                  </div>
                  <div class="value">
                    0
                  </div>
                </div>
                <div class="yesterday-data">
                  <div class="label">
                    昨日数据
                  </div>
                  <div class="value">
                    0 人
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 查询区域 -->
    <div class="search-area">
      <el-form
        :inline="true"
        :model="searchQuery"
        class="search-form"
      >
        <el-form-item label="用户ID查询">
          <el-input
            v-model="searchQuery.id"
            placeholder="请输入用户ID"
            clearable
          />
        </el-form-item>
        <el-form-item label="访问类型">
          <el-select
            v-model="searchQuery.visitType"
            placeholder="请选择访问类型"
            clearable
          >
            <el-option
              label="注册用户"
              value="registered"
            />
            <el-option
              label="游客"
              value="guest"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式">
          <el-select
            v-model="searchQuery.sortType"
            placeholder="请选择排序方式"
            clearable
          >
            <el-option
              label="按访问时间降序"
              value="visit_time_desc"
            />
            <el-option
              label="按访问时间升序"
              value="visit_time_asc"
            />
            <el-option
              label="按活跃频率降序"
              value="frequency_desc"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button @click="handleReset">
            重置
          </el-button>
          <el-button
            type="danger"
            :disabled="selectedIds.length === 0"
            @click="batchDelete"
          >
            批量删除 ({{ selectedIds.length }})
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 访客管理表格 -->
    <!-- 1.绑定当前页数据 -->
    <!-- 2.显示边框 -->
    <!-- 3.宽度100%，上边距20px -->
    <!-- 4.表头样式 -->
    <!-- 5.浅灰色背景 -->
    <!-- 6.深灰色文字 -->
    <!-- 7.加粗 -->
    <!-- 8.选择项变化事件 -->
    <el-table
      :data="currentPageData"
      border
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 'bold'
      }"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选列 -->
      <!-- 1.多选框列 -->
      <!-- 2.固定宽度 -->
      <!-- 3.居中对齐 -->
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />

      <!-- ID列 -->
      <!-- 1.绑定id字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.固定宽度 -->
      <el-table-column
        prop="id"
        label="ID"
        width="80"
        align="center"
      />

      <!-- IP地址列 -->
      <!-- 1.绑定ipAddress字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.固定宽度 -->
      <el-table-column
        prop="ipAddress"
        label="IP地址"
        width="300"
        align="center"
      />

      <!-- 用户信息列 -->
      <!-- 1.绑定userInfo字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <el-table-column
        prop="userInfo"
        label="用户信息"
        align="center"
      />

      <!-- 活跃频率列 -->
      <!-- 1.绑定frequency字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.固定宽度 -->
      <el-table-column
        prop="frequency"
        label="活跃频率"
        width="170"
        align="center"
      />

      <!-- 访问类型列 -->
      <!-- 1.绑定visitType字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.自定义模板显示 -->
      <el-table-column
        prop="visitType"
        label="访问类型"
        width="170"
        align="center"
      >
        <template #default="{row}">
          <el-tag :type="row.visitType === 'registered' ? 'success' : 'info'">
            {{ row.visitType === 'registered' ? '注册用户' : '游客' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- 创建时间列 -->
      <!-- 1.绑定createTime字段 -->
      <!-- 2.列标题 -->
      <!-- 3.居中对齐 -->
      <!-- 4.固定宽度 -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="240"
        align="center"
      />

      <!-- 操作列 -->
      <!-- 1.列标题 -->
      <!-- 2.居中对齐 -->
      <!-- 3.固定宽度 -->
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <!-- 自定义列模板 -->
        <template #default="{row}">
          <!-- 详情按钮 -->
          <!-- 1.小尺寸按钮 -->
          <!-- 2.点击事件，传入当前行数据 -->
          <el-button
            size="mini"
            @click="showDetail(row)"
          >
            详情
          </el-button>

          <!-- 删除按钮 -->
          <!-- 1.小尺寸按钮 -->
          <!-- 2.红色警示按钮 -->
          <!-- 3.点击事件，传入当前行id -->
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-area">
      <span>共 {{ filteredData.length }} 条</span>
      <el-pagination
        :current-page="pagination.currentPage"
        :page-size="6"
        layout="prev, pager, next, jumper"
        :total="filteredData.length"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      title="访问详情"
      :visible.sync="detailVisible"
      width="40%"
      :modal="false"
    >
      <div
        v-if="currentDetail"
        class="detail-content"
      >
        <el-descriptions
          :column="2"
          border
        >
          <el-descriptions-item label="ID">
            {{ currentDetail.id }}
          </el-descriptions-item>
          <el-descriptions-item label="IP地址">
            {{ currentDetail.ipAddress }}
          </el-descriptions-item>
          <el-descriptions-item label="用户信息">
            {{ currentDetail.userInfo }}
          </el-descriptions-item>
          <el-descriptions-item label="活跃频率">
            {{ currentDetail.frequency }}
          </el-descriptions-item>
          <el-descriptions-item label="访问类型">
            {{ currentDetail.visitType === 'registered' ? '注册用户' : '游客' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ currentDetail.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ currentDetail.updateTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      searchQuery: {
        id: '',
        visitType: '',
        sortType: ''
      },
      allData: [
        { id: 1, ipAddress: '中国 北京', userInfo: '用户A', frequency: '高', visitType: 'registered', createTime: '2023-01-01 10:00:00', updateTime: '2023-01-01 10:00:00' },
        { id: 2, ipAddress: '中国 上海', userInfo: '用户B', frequency: '中', visitType: 'guest', createTime: '2023-01-02 11:00:00', updateTime: '2023-01-02 11:00:00' },
        { id: 3, ipAddress: '中国 广州', userInfo: '用户C', frequency: '低', visitType: 'registered', createTime: '2023-01-03 09:30:00', updateTime: '2023-01-03 09:30:00' },
        { id: 4, ipAddress: '中国 深圳', userInfo: '用户D', frequency: '高', visitType: 'registered', createTime: '2023-01-04 14:15:00', updateTime: '2023-01-04 14:15:00' },
        { id: 5, ipAddress: '中国 杭州', userInfo: '用户E', frequency: '中', visitType: 'registered', createTime: '2023-01-05 16:20:00', updateTime: '2023-01-05 16:20:00' },
        { id: 6, ipAddress: '中国 成都', userInfo: '用户F', frequency: '高', visitType: 'guest', createTime: '2023-01-06 08:45:00', updateTime: '2023-01-06 08:45:00' },
        { id: 7, ipAddress: '中国 重庆', userInfo: '用户G', frequency: '低', visitType: 'registered', createTime: '2023-01-07 10:30:00', updateTime: '2023-01-07 10:30:00' },
        { id: 8, ipAddress: '中国 武汉', userInfo: '用户H', frequency: '中', visitType: 'guest', createTime: '2023-01-08 11:50:00', updateTime: '2023-01-08 11:50:00' },
        { id: 9, ipAddress: '中国 西安', userInfo: '用户I', frequency: '高', visitType: 'guest', createTime: '2023-01-09 13:25:00', updateTime: '2023-01-09 13:25:00' },
        { id: 10, ipAddress: '中国 南京', userInfo: '用户J', frequency: '低', visitType: 'registered', createTime: '2023-01-10 15:40:00', updateTime: '2023-01-10 15:40:00' }
      ],
      filteredData: [],
      pagination: {
        currentPage: 1,
        pageSize: 6
      },
      detailVisible: false,
      currentDetail: null,
      selectedIds: [], // 新增
      selectedRows: [] // 新增
    }
  },
  computed: {
    currentPageData () {
      const start = (this.pagination.currentPage - 1) * 6
      const end = start + 6
      return this.filteredData.slice(start, end)
    }
  },
  created () {
    this.filteredData = [...this.allData]
  },
  methods: {
    // 新增：处理选择变化
    handleSelectionChange (selection) {
      this.selectedRows = selection
      this.selectedIds = selection.map(item => item.id)
    },

    // 新增：批量删除
    batchDelete () {
      if (this.selectedIds.length === 0) {
        this.$message.warning('请至少选择一条记录')
        return
      }

      this.$confirm(`确定删除选中的 ${this.selectedIds.length} 条记录吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.allData = this.allData.filter(item => !this.selectedIds.includes(item.id))
        this.filteredData = this.filteredData.filter(item => !this.selectedIds.includes(item.id))

        this.$message.success('删除成功')
        this.selectedIds = []

        if (this.currentPageData.length === 0 && this.pagination.currentPage > 1) {
          this.pagination.currentPage--
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSearch () {
      this.loading = true
      this.pagination.currentPage = 1

      setTimeout(() => {
        this.filteredData = this.allData.filter(item => {
          if (this.searchQuery.id && !item.id.toString().includes(this.searchQuery.id)) {
            return false
          }
          if (this.searchQuery.visitType && item.visitType !== this.searchQuery.visitType) {
            return false
          }
          return true
        })

        if (this.searchQuery.sortType) {
          this.filteredData.sort((a, b) => {
            if (this.searchQuery.sortType === 'visit_time_desc') {
              return new Date(b.createTime) - new Date(a.createTime)
            } else if (this.searchQuery.sortType === 'visit_time_asc') {
              return new Date(a.createTime) - new Date(b.createTime)
            } else if (this.searchQuery.sortType === 'frequency_desc') {
              const freqOrder = { 高: 3, 中: 2, 低: 1 }
              return freqOrder[b.frequency] - freqOrder[a.frequency]
            }
            return 0
          })
        }

        this.loading = false
      }, 300)
    },
    handleReset () {
      this.searchQuery = {
        id: '',
        visitType: '',
        sortType: ''
      }
      this.filteredData = [...this.allData]
      this.pagination.currentPage = 1
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
    },
    showDetail (row) {
      this.currentDetail = row
      this.detailVisible = true
    },
    handleDelete (id) {
      this.$confirm('确定删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.allData = this.allData.filter(item => item.id !== id)
        this.filteredData = this.filteredData.filter(item => item.id !== id)
        this.$message.success('删除成功')
        if (this.currentPageData.length === 0 && this.pagination.currentPage > 1) {
          this.pagination.currentPage--
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped>
.visit-statistics-container {
  padding: 20px;
  background-color: #fff;
}

.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.card-data {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.today-data,
.yesterday-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.today-data .value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.yesterday-data .value {
  font-size: 14px;
  color: #909399;
}

.search-area {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 批量删除按钮样式 */
.el-button--danger[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 按钮间距 */
.el-form-item .el-button {
  margin-left: 10px;
}

.table-area {
  margin-top: 20px;
}

.pagination-area {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pagination-area .el-pagination {
  margin-left: 15px;
}

.detail-content {
  padding: 10px;
}

.el-descriptions-item__label {
  width: 100px;
}
</style>
